<template>
  <el-container class="panel-block">
    <el-header class="sa-header">
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          <span class="left">分销商品</span>
          <search-condition
            :conditionLabel="filterParams.conditionLabel"
            @deleteFilter="deleteFilter"
          ></search-condition>
        </div>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
          <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0" v-loading="state.loading">
      <el-table
        height="100%"
        class="sa-table"
        :data="state.tableData"
        stripe
        @selection-change="handleSelectionChange"
      >
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" min-width="90" />
        <el-table-column label="商品信息" min-width="300">
          <template #default="scope">
            <goods-item
              :goods="{
                image: scope.row.image,
                title: scope.row.title,
                subtitle: scope.row.subtitle,
                is_sku: scope.row.is_sku,
                activities: scope.row.activities,
                promos: scope.row.promos,
              }"
              mode="goods"
            >
            </goods-item>
          </template>
        </el-table-column>
        <el-table-column label="价格" min-width="150" align="center">
          <template #default="scope">
            <div>{{ scope.row.price?.join('~') || 0 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="分销规则" width="100" align="center">
          <template #default="scope">
            <template v-if="scope.row.commission_goods && scope.row.commission_goods.status == 1">
              <template v-if="scope.row.commission_goods.self_rules == 0">默认规则</template>
              <template v-if="scope.row.commission_goods.self_rules == 1">独立规则</template>
              <template v-if="scope.row.commission_goods.self_rules == 2">批量规则</template>
            </template>
            <template v-else>-</template>
          </template>
        </el-table-column>
        <el-table-column label="商品状态" width="100" align="center">
          <template #default="scope">
            <span :style="statusStyle(scope.row.status)">
              {{ scope.row.status_text }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="140" fixed="right">
          <template #default="scope">
            <div class="sa-flex">
              <span class="sa-m-r-12" :style="statusStyle(scope.row.commission_goods?.status)">
                {{ scope.row.commission_goods?.status_text || '未参与' }}
              </span>
              <el-button
                v-auth="'shop.admin.commission.goods.detail'"
                class="is-link"
                type="primary"
                @click="onSetCommission(scope.row.id)"
                >设置佣金</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <sa-view-bar>
      <template #left>
        <el-button
          v-auth="'shop.admin.commission.goods.edit'"
          :disabled="state.selected.length == 0"
          @click="onBatchSetCommission"
          >设置佣金</el-button
        >
      </template>
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData" />
      </template>
    </sa-view-bar>
  </el-container>
</template>
<script>
  export default {
    name: 'shop.admin.commission.goods',
  };
</script>
<script setup>
  import { onMounted, reactive } from 'vue';
  import { api } from '../commission.service';
  import { useModal, usePagination } from '@/sheep/hooks';
  import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
  import { composeFilter } from '@/sheep/utils';
  import GoodsItem from '@/app/shop/components/goods-item.vue';
  import GoodsEdit from './edit.vue';
  import { cloneDeep } from 'lodash';

  const filterParams = reactive({
    tools: {
      keyword: {
        type: 'tinputprepend',
        placeholder: '请输入查询内容',
        field: 'keyword',
        keyword: {
          field: 'id',
          value: '',
        },
        options: [
          {
            label: '商品ID',
            value: 'id',
          },
          {
            label: '商品名称',
            value: 'title',
          },
          {
            label: '商品副标题',
            value: 'subtitle',
          },
        ],
      },
      'commission_goods.status': {
        type: 'tselect',
        label: '分销状态',
        field: 'commission_goods.status',
        value: '',
        options: {
          data: [
            {
              label: '不参与',
              value: '0',
            },
            {
              label: '参与中',
              value: '1',
            },
          ],
        },
      },
    },
    data: {
      keyword: { field: 'id', value: '' },
      'commission_goods.status': '',
    },
    conditionLabel: {},
  });
  const { openFilter, deleteFilter } = useSearch({ filterParams, getData });

  const state = reactive({
    loading: false,
    tableData: [],
    selected: [],
  });

  const { pageData } = usePagination();

  async function getData(page) {
    state.loading = true;
    if (page) pageData.page = page;
    let tempSearch = cloneDeep(filterParams.data);
    let search = composeFilter(tempSearch, {
      title: 'like',
      subtitle: 'like',
    });

    const { error, data } = await api.goods.list({
      page: pageData.page,
      list_rows: pageData.list_rows,
      ...search,
    });
    if (error === 0) {
      state.tableData = data.data;
      pageData.page = data.current_page;
      pageData.list_rows = data.per_page;
      pageData.total = data.total;
    }
    state.loading = false;
  }

  function handleSelectionChange(val) {
    state.selected = val;
  }

  function onSetCommission(ids, type = '') {
    useModal(
      GoodsEdit,
      {
        title: '设置佣金',
        ids,
        type,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }

  function onBatchSetCommission() {
    let ids = [];
    state.selected.forEach((i) => {
      ids.push(i.id);
    });
    onSetCommission(ids.join(','), 'batch');
  }

  function statusStyle(status) {
    switch (status) {
      case 'up':
        return {
          color: '#52C41A',
        };
        break;
      case 'down':
        return {
          color: '#FF4D4F',
        };
        break;
      case 'hidden':
        return {
          color: 'var(--el-color-info)',
        };
        break;
      case 0:
        return {
          color: '#FF4D4F',
        };
        break;
      case 1:
        return {
          color: '#52C41A',
        };
        break;
      default:
        return {
          color: 'var(--el-color-info)',
        };
    }
  }

  onMounted(() => {
    getData();
  });
</script>
